<template>
  <view>
    <!-- <topNav>123</topNav> -->
    <uv-sticky bgColor="#fff">
      <uv-tabs :list="list" @click="clickItem" :scrollable="false"></uv-tabs>
      <view class="searchBox">
        <uv-search shape="round" clearabled :placeholder="searchPlaceholder" v-model="searchValue"
          @search="onSearch"></uv-search>
      </view>
    </uv-sticky>
  </view>
  <view class="body-container">
    <swiper class="swiper" :current="swiperIndex">
      <!-- 列表内容 -->
      <swiper-item v-for="i in list">
        <view>
          <uv-list>
            <uv-list-item :title="item.name" border v-for="(item,index) in displayList" :key="item.id" link
              :to="item.link">
            </uv-list-item>
            <!-- <uv-list-item title="列表禁用状态" border></uv-list-item> -->
          </uv-list>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup>
  import {
    ref,
    computed,
    watch
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import nx from '@/nx';

  const orgApi = nx.$api.organization
  const contactApi = nx.$api.contact

  const list = ref([{
    name: '机构',
    link: '/ttt',
    type: 'organization',
    index: 0
  }, {
    name: '联系人',
    link: "/tuu'",
    type: 'contact',
    index: 1
  }])

  let swiperIndex = ref(0)
  let searchType = ref("机构")
  const searchValue = ref("")
  // console.log('swiperIndex', swiperIndex.value);
  // let indexList = ref(["A", "B", "C", "D", "E", "F", "G", "H", "J"])
  // let itemArr = ref([
  // 	['列表A1', '列表A2', '列表A3'],
  // 	['列表B1', '列表B2', '列表B3'],
  // 	['列表C1', '列表C2', '列表C3'],
  // 	['列表D1', '列表D2', '列表D3'],
  // 	['列表E1', '列表E2', '列表E3'],
  // 	['列表F1', '列表F2', '列表F3'],
  // 	['列表G1', '列表G2', '列表G3'],
  // 	['列表H1', '列表h2', '列表H3'],
  // 	['列表J1', '列表J2', '列表J3'],
  // ])


  const searchPlaceholder = computed(() => {
    return "请输入需要搜索的" + searchType.value
  })

  const onSearch = () => {
    // 机构
    if (swiperIndex.value === 0) getOrgList({
      searchOrg: searchValue.value
    })
    // 联系人
    if (swiperIndex.value === 1) getContactList({
      name: searchValue.value
    })
    // searchValue.value = ""
  }

  const clickItem = (item) => {
    // console.log("###", item);
    swiperIndex.value = item.index
    searchType.value = item.name
    searchValue.value = ""
  }
  const displayList = ref()

  const getOrgList = async (data = "") => {
    let resp = await orgApi.getOrgList(data)
    if (resp.code === 200) {
      // console.log('list', resp.data)
      let orgList = resp.data.map(item => {
        return {
          name: item.fullname,
          id: item._id,
          link: `/pages/display/OrganizationDetail?id=${item._id}`
        }
      })
      // 因为字段不统一，所以map调整下
      displayList.value = orgList
    }
  }

  const getContactList = async (data = "") => {
    let resp = await contactApi.getContactList(data)
    if (resp.code === 200) {
      // console.log('list', resp.data)
      let contactList = resp.data.map(item => {
        return {
          name: item.name,
          id: item._id,
          link: `/pages/display/ContactDetail?id=${item._id}`
        }
      })
      displayList.value = contactList
    }
  }

  watch(() => swiperIndex.value, async newValue => {
    // console.log('监听',newValue);
    // 机构
    if (swiperIndex.value === 0) getOrgList()
    // 联系人
    if (swiperIndex.value === 1) getContactList()
  }, {
    immediate: true
  })
  // const displayList = computed(() => {
  //   // return 30
  //   orgApi.getOrgList().then(resp =>{
  //     console.log('list', resp.data)
  //     return resp.data
  //   })
  // if (resp.code === 200){
  //   console.log('list', resp.data);
  //   return resp.data
  // }
  // })
  onLoad(() => {
    // const info = uni.getSystemInfoSync()
    // console.log(info);
  })
</script>

<style lang="scss" scoped>
  .searchBox {
    // background-color: pink;
    display: flex;
    width: 690rpx;
    align-items: center;
    margin: 30rpx auto 10rpx;
  }


  .swiper {
    margin-top: 30rpx;
    height: 100vh;

    .list-cell {
      /* #ifndef APP-PLUS */
      display: flex;
      box-sizing: border-box;
      width: 100%;
      /* #endif */
      padding: 10px 24rpx;
      overflow: hidden;
      color: #323233;
      font-size: 14px;
      line-height: 24px;
      background-color: #fff;
    }
  }
</style>